<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>

<fmt:setBundle basename="ApplicationMessage" />
<fmt:setLocale value="zh_CN" />

	<%@ include file="/WEB-INF/include/meta.jsp"%>
	<%@ include file="/WEB-INF/include/css.jsp"%>
	<link href="${ctx.resource}/css/select2.css" rel="stylesheet">
	<link href="${ctx.resource}/css/select2-bootstrap.css" rel="stylesheet">
	<title>银行流水 - 租房宝金融管理平台</title>
</head>
<body>

<%@ include file="/WEB-INF/include/header.jsp"%>
	
  <div class="web-g-main">

    <%@ include file="/WEB-INF/include/aside.jsp"%>
    <div class="content">
      <header class="header clearfix">
          <h3 class="pull-left">银行流水</h3>
       </header>
       
       <ul class="nav nav-tabs color-tabs">
         <li><a href="${ctx}/flow/monitor" class="unsettlement-tab" >今日流水</a></li>
         <li class="active"><a href="javascript:void(0)" class="settlement-tab">历史流水</a></li>
       </ul>
       <br>
       <form method="GET" action="${ctx}/flow/monitor/history/search"> 

         <div class="row">

           <div class="col-xs-4">

             <div class="input-daterange-title pull-left"><label>日期</label></div>

             <div class="input-daterange input-group">
                 
               <input type="text" class="input-sm form-control" name="start" value="${start}" />
               <span class="input-group-addon">至</span>
               <input type="text" class="input-sm form-control" name="end" value="${end}"/>

             </div>

           </div>
                          
           <div class="col-xs-5">
             
             <div class="input-daterange-title pull-left">
               <label>帐户</label>
             </div>
             <div class="input-daterange input-group pull-left">
               <select name="accountRelation" class="form-control apps">
                 <c:forEach var="item" items="${AccountRelations}"
                   varStatus="status">
                   <option value="${item.id }" <c:if test="${item.id == accountRelation }">selected="selected"</c:if>>${item.company.shortName }&nbsp;(${item.account.accountNo })</option>
                 </c:forEach>

               </select>
             </div>

           </div>
           
           <div class="col-xs-2">
             <div class="btn-group pull-right">
               <button class="btn btn-default btn-shadow btn-shadow-default demo2do-btn" ><i class="glyphicon glyphicon-search"></i>&nbsp;&nbsp;查询</button>
             </div>
           
           </div>

         </div>

       </form>       

       <c:if test="${not empty infoMessage}">
            <div class="alert alert-success alert-dismissable alert-fade top-margin-10 text-align-center">
              <button type="button" class="close" data-dismiss="alert">&times;</button>
              <i class="glyphicon glyphicon-info-sign"></i>&nbsp;&nbsp;
              <fmt:message key="${infoMessage}" />
            </div>
       </c:if>
         <div class="table-area">
         <div class="col-md-1">
           <span>单位:元</span>
         </div>
         <table class="data-list">
              <thead>
                <tr>
                  <th>入账时间</th>
                  <th>借贷标志</th>
                  <th>借方发生额</th>
                  <th>贷方发生额</th>
                  <th>凭证号</th>
                  <th>对方账号</th>
                  <th>对方户名</th>
                  <th>摘要</th>
                  <th>附言</th>
                </tr>
              </thead>
              <tbody>
                <c:forEach var="flow" items="${flowList}">
                  <tr>
                    <td><fmt:formatDate value="${flow.time}"
                        pattern="yyyy/MM/dd HH:mm:SS" /></td>
                    <td><c:choose>
                        <c:when test="${not empty flow.drcrf and flow.drcrf eq 1}">贷</c:when>
                        <c:otherwise>借</c:otherwise>
                      </c:choose></td>
                    <td><fmt:formatNumber value="${flow.creditAmount}"
                        type="currency" /></td>
                    <td><fmt:formatNumber value="${flow.debitAmount}"
                    	type="currency" /></td>
                    <td>${flow.vouhNo}</td>
                    <td>${flow.recipAccNo}</td>
                    <td>${flow.recipName}</td>
                    <td>${flow.summary}</td>
                    <td>${flow.postScript}</td>
                  </tr>
                </c:forEach>
                <tr>
                	<td></td>
                	<td>合计</td>
                	<td>借:<fmt:formatNumber value="${total.debitSum}"
                        type="currency" /></td>
                	<td>贷:<fmt:formatNumber value="${total.creditSum}"
                        type="currency" /></td>
                	<td></td>
                	<td></td>
                	<td></td>
                	<td></td>
                	<td></td>
                </tr>
              </tbody>
          </table>
         </div>

       <%@ include file="/WEB-INF/include/footer.jsp"%>
       
    </div>

  </div>
	

	<%@ include file="/WEB-INF/include/script.jsp"%>
	<script src="${ctx.resource}/js/bootstrap-switch.min.js"></script>
	<script src="${ctx.resource}/js/bootstrap-modal-trigger.js"></script>
	<script src="${ctx.resource}/js/select2.min.js"></script>
	<script src="${ctx.resource}/js/select2_locale_zh-CN.js"></script>
	<script src="${ctx.resource}/js/bootstrap.validate.js"></script>
	<script src="${ctx.resource}/js/bootstrap.validate.en.js"></script>
	<script src="${ctx.resource}/js/earth-preupload.js"></script>
	<script src="${ctx.resource}/js/bootstrap-alert-fade-trigger.js"></script>

	<script src="${ctx.resource}/js/bootstrap-datepicker.js"></script>
	<script src="${ctx.resource}/js/bootstrap-datepicker.zh-CN.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			$('.input-daterange').datepicker({
				format : "yyyymmdd",
				todayBtn : "linked",
				language : "zh-CN",
				orientation : "top left",
				autoclose : true,
				todayHighlight : true
			});
		})
	</script>


</body>
</html>
